import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAppStore = defineStore('app', () => {
  const sidebar = ref({
    opened: true,
    withoutAnimation: false
  })
  
  const device = ref('desktop')
  const size = ref('default')
  const theme = ref('light')

  // 切换侧边栏
  const toggleSideBar = () => {
    sidebar.value.opened = !sidebar.value.opened
    sidebar.value.withoutAnimation = false
  }

  // 关闭侧边栏
  const closeSideBar = (withoutAnimation: boolean) => {
    sidebar.value.opened = false
    sidebar.value.withoutAnimation = withoutAnimation
  }

  // 切换设备
  const toggleDevice = (val: string) => {
    device.value = val
  }

  // 设置尺寸
  const setSize = (val: string) => {
    size.value = val
  }

  // 切换主题
  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }

  return {
    sidebar,
    device,
    size,
    theme,
    toggleSideBar,
    closeSideBar,
    toggleDevice,
    setSize,
    toggleTheme
  }
})
